<!-- 
      invoice.html
      发票信息 id="invoice"
      
      Created by tang on 2017-03-20.
      Copyright 2017 tang. All rights reserved.
 -->

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/address.css" />
</head>

<body class="white">
	<div class="mui-content loading" id="vueMain">
	    <div class="seltype">
	    		<p>发票类型</p>
	    		<div class="invoice_type invoice_types">
	    			<a v-bind:class="piao.type==1?'active':''" data-id="1">纸质发票</a>
	    			<a v-bind:class="piao.type==2?'active':''" data-id="2">电子发票</a>
	    			<a v-bind:class="piao.type==3?'active':''" data-id="3">不要发票</a>
	    		</div>
	    </div>
	    <div v-if="piao.type!=3">
	    <div class="seltype" style="border-top: 10px solid #ebebeb;padding-bottom: 0;">
	    		<p>发票抬头</p>
	    		<div class="invoice_head">
	    			<a v-bind:class="piao.head==1?'active':''" data-id="1">个人发票</a>
	    			<a v-bind:class="piao.head==2?'active':''" data-id="2">单位发票</a>
	    			
	    		</div>
	    		<div class="inc-name mui-input-row" >
	    			<label v-if="piao.head==2">单位名称</label>
	    			<input v-if="piao.head==2" type="text" name="" v-model="piao.company" id=""placeholder="单位各称" />
	    		</div>
	    </div>
	    <div class="mformbox">
		    	<form class="mui-input-group invs">
		    		<div class="mui-input-row tis">
		    	        <label>收票人信息</label>
		    	    </div>
		    	    <div class="mui-input-row">
		    	        <label>收票人手机</label>
		    	        <input type="text" class="mui-input-clear" v-model="piao.prosen.mobile" placeholder="" value="">
		    	    </div>
		    	    <div class="mui-input-row">
		    	        <label>收票人邮箱</label>
		    	        <input type="text" class="mui-input-clear" v-model="piao.prosen.email" placeholder="可选填">
		    	    </div>
		    	</form>
	    </div>
	    <div class="seltype">
	    		<p>发票内容</p>
	    		<div class="invoice_type invoice_contains">
	    			<template v-for="(item,index) in invoice">
	    				<a v-bind:class="index==piao.contains?'active':''" :data-idx="index">{{item}}</a>
	    			</template>
	    		</div>
	    </div>
       </div>
       <div class="mui-content-padded">
	   		
	   		<button type="button" class="bexta-btn bexta-btn-red mui-btn mui-btn-block enter" >确定</button>
	   		
	   </div>
	</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps, views;
	mui.init()
	mui.plusReady(function () {
	   views = bexta.getWebview();
	   apps = new Vue({
	   		el:'#vueMain',
	   		data:{
	   			invoice:views.invoice,
	   			piao:{
	   				type:views.def.typeNum,  //类型
	   				head:1,  // 抬头
	   				company:views.def.invoice_name, //公司名称
	   				contains:0,  //  发票内容
	   				prosen:{    //收票人信息
	   					mobile:views.def.invoice_mobile,
	   					email:views.def.invoice_email
	   				}
	   			}
	   		},
	   		
	   		mounted:function(){
	   			document.querySelector('.loading').classList.add('loadRun');
	   			if( views.def.invoice_title == "单位发票" ){
	   				this.piao.head = 2;
	   			}else{
	   				this.piao.head = 1;
	   			}
	   			var self = this;
	   			mui.each(this.invoice, function(index){
	   				if(this == views.def.invoice_body){
	   					self.piao.contains = index;
	   				}
	   			});
	   			//类型选择
	   			mui('#vueMain').on('tap', '.invoice_types a', function(){
	   				var tid = this.getAttribute('data-id');
	   				if( tid == apps.piao.type ){
	   					return ;
	   				}
	   				apps.piao.type = tid;
	   			});
	   			//抬头选择
	   			mui('#vueMain').on('tap', '.invoice_head a', function(){
	   				var tid = this.getAttribute('data-id');
	   				if( tid == apps.piao.head ){
	   					return ;
	   				}
	   				apps.piao.head = tid;
	   			});
	   			//内容选择
	   			mui('#vueMain').on('tap', '.invoice_contains a', function(){
	   				apps.piao.contains = this.getAttribute('data-idx');
	   				console.log(apps.piao.type)
	   				console.log(apps.piao.contains)
	   			});
	   			//确认提交
	   			mui('#vueMain').on('tap', '.enter', function(){
	   				if( apps.piao.head==2 ){
	   					if( apps.piao.company=='' ){
	   						mui.toast("请填写单位名称");
	   						return ;
	   					}
	   				}
	   				if( apps.piao.prosen.mobile && !check.phone(apps.piao.prosen.mobile) ){
	   					mui.toast("收票人手机错误");
	   					return ;
	   				}
	   				if( apps.piao.prosen.email && !check.email(apps.piao.prosen.email) ){
	   					mui.toast("收票人邮箱错误");
	   					return ;
	   				}
	   				var sendData = {
	   					typeNum:apps.piao.type,
	   					type:apps.piao.type==1?'纸质发票':(apps.piao.type==2?'电子发票':'不要发票'),
	   					head:apps.piao.head==1?'个人发票':'单位发票',
	   					company:apps.piao.company,
	   					contains:apps.invoice[apps.piao.contains],
	   					prosen:apps.piao.prosen
	   				};
	   				mui.fire(views.opener(), 'setInvoice', {
	   					invoice:sendData
	   				});
	   				mui.back();
	   			});
	   		}
	   });
	});
</script>
</body>
</html>